<template>
  <!-- 设备类型-->
  <div class="div-one">
    <div class="header">
      <el-form :inline="true" :model="dataList" class="demo-form-inline">
        <el-form-item label="型号搜索:">
          <el-input v-model="dataList.name" placeholder="请输入">
            <i slot="suffix" class="el-icon-error" @click="empty"/>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            class="cha"
            @click="getOperateData"
          >查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="body">
      <div class="body-btn">
        <el-button
          type="warning"
          class="xin"
          icon="el-icon-circle-plus-outline"
          @click="addListData"
        >
          新建
        </el-button>
      </div>

      <!-- 表格组件 -->
      <el-table
        ref="multipleTable"
        :data="deviveList"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column
          label="序号"
          prop="typeId"
          width="100"
        />
        <el-table-column
          prop="name"
          label="型号名称"
          width="175"
        />
        <el-table-column
          prop="model"
          label="型号编码"
          width="175"
        />
        <el-table-column
          prop="image"
          label="设备图片"
          width="175"
          show-overflow-tooltip
        >
          <template #default="{row}">
            <el-avatar size="medium" :src="row.image"/>
          </template>
        </el-table-column>
        <el-table-column
          prop="vmRow"
          label="货道行"
          width="175"
          show-overflow-tooltip
        />
        <el-table-column
          prop="vmCol"
          label="货道列"
          width="175"
          show-overflow-tooltip
        />
        <el-table-column
          prop="channelMaxCapacity"
          label="设备容量"
          width="175"
          show-overflow-tooltip
        />
        <el-table-column
          label="操作"
          show-overflow-tooltip
        >
          <template #default="{row}">
            <el-button type="text" @click="changeHuo(row)">修改</el-button>
            <el-button type="text" style="color:red" @click="delremove(row.typeId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-row v-if="totalPage===1">
        <el-col :span="24" style="margin:20px 0">
          <div>
            <span>共{{ total }}条记录  第{{ dataList.pageIndex }}/{{ totalPage }}页</span>
          </div>
          <div>
            <el-button type="text" :disabled="dataList.pageIndex<=1" @click="submit('add')">上一页</el-button>
            <el-button type="text" :disabled="dataList.pageIndex>=totalPage" @click="submit('jian')">下一页</el-button>
          </div>
        </el-col>
      </el-row>
      <!-- 修改设备类型 -->
      <Modify ref="modify"/>
    </div>
  </div>
</template>
<script>
import { getHousLisst, delshouhuoji, setshouhuoji } from '../../api/devive'
import Modify from './compponents/modify.vue'

export default {
  name: 'Leixing',
  components: {
    Modify
  },
  props: {},
  data() {
    return {
      dataList: {
        pageIndex: 1,
        pageSize: 10,
        name: ''
      },
      total: null,
      totalPage: null,
      deviveList: [],
      dialogVisible: false,
      form: {
        nodeId: '',
        vmType: '',
        createUserId: null
      },
      point: [],
      shouhuoji: [],
      selected: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getOperateData()
  },
  mounted() {
  },
  methods: {
    // 获取数据
    async getOperateData() {
      const data = await getHousLisst(this.dataList)
      console.log(data.data, 111)
      this.total = Number(data.data.totalCount)
      this.totalPage = Number(data.data.totalPage)
      this.deviveList = data.data.currentPageRecords
    },
    // TODO
    handleSelectionChange() {
    },
    // 新建
    addListData() {
      this.$refs.modify.dialogVisible = true
    },
    // 查询
    async queryLList() {
      this.getOperateData()
    },
    // 情空input框内容
    empty() {
      this.dataList.name = ''
      this.getOperateData()
    },
    onSelect(rows) {
      // console.log(rows)
      this.selected = rows
    },
    handleClose() {
    },
    // 删除
    async delremove(id) {
      try {
        await delshouhuoji(id)
        this.getOperateData()
      } catch (error) {
        console.log(error)
      }
    },
    // 修改
    async changeHuo(row) {
      const data = await setshouhuoji(row)
      console.log(data, 222)
      this.$refs.modify.form = data
      this.$refs.modify.dialogVisible = true
    },

    submit(type) {
      if (type === 'add') {
        this.dataList.pageIndex--
      } else {
        this.dataList.pageIndex++
      }
      this.getOperateData()
    }
  }
}
</script>
<style lang="scss" scoped>
.el-drawer_header span:focus {
  outline: 0;
}

.div-one {
  background-color: #f8fafd;
  padding: 20px;

  .header {
    width: 100%;
    background-color: #fff;
    padding: 20px 0 0 20px;
    height: 80px;
    margin-bottom: 20px;

    .cha {
      background-color: #5f84ff;
    }
  }

  .body {
    background-color: #fff;
    padding: 20px 0 0 20px;

    .body-btn {
      margin-bottom: 20px;

      .xin {
        background-color: #ff6725;
      }

      .gong {
        background-color: #fbf4f0;
        color: #000;
      }
    }

    .el-table-column {
      height: 50px;
    }
  }
}

.el-row {
  .el-col {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;

    div {
      font-size: 14px;
      color: #ccc;
    }

    .el-button {
      width: 70px;
      height: 30px;
      background-color: #d5ddf8;
      text-align: center;
      color: #000;
      padding: 0;
    }
  }
}
</style>
